<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>用户列表 - SSM项目测试</title>
    <meta charset="UTF-8">
    <script src="${pageContext.request.contextPath}/js/jquery-3.7.1.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .info-panel {
            background-color: #e7f3ff;
            padding: 15px;
            border-left: 4px solid #2196F3;
            margin: 20px 0;
            border-radius: 5px;
        }
        .success-panel {
            background-color: #e8f5e8;
            padding: 15px;
            border-left: 4px solid #4CAF50;
            margin: 20px 0;
            border-radius: 5px;
        }
        .error-panel {
            background-color: #ffe8e8;
            padding: 15px;
            border-left: 4px solid #f44336;
            margin: 20px 0;
            border-radius: 5px;
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
            margin: 5px;
            text-decoration: none;
            border-radius: 5px;
            cursor: pointer;
            border: none;
            font-size: 14px;
        }
        .btn-primary {
            background-color: #2196F3;
            color: white;
        }
        .btn-success {
            background-color: #4CAF50;
            color: white;
        }
        .btn-info {
            background-color: #17a2b8;
            color: white;
        }
        .btn:hover {
            opacity: 0.8;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .status-active {
            color: #4CAF50;
            font-weight: bold;
        }
        .status-inactive {
            color: #f44336;
            font-weight: bold;
        }
        .no-data {
            text-align: center;
            color: #666;
            font-style: italic;
            padding: 40px;
        }
        .stats {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }
        .stat-item {
            text-align: center;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
            min-width: 120px;
        }
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #2196F3;
        }
        .stat-label {
            color: #666;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>用户管理系统 - 数据展示测试</h1>
        
        <!-- 操作按钮 -->
        <div style="margin-bottom: 20px;">
            <button class="btn btn-primary" onclick="refreshData()">刷新数据</button>
            <button class="btn btn-success" onclick="initTestData()">初始化测试数据</button>
            <button class="btn btn-info" onclick="getStats()">获取统计信息</button>
            <a href="${pageContext.request.contextPath}/" class="btn btn-primary">返回首页</a>
        </div>
        
        <!-- 消息显示 -->
        <c:if test="${not empty message}">
            <div class="success-panel">
                <strong>成功：</strong>${message}
            </div>
        </c:if>
        
        <c:if test="${not empty error}">
            <div class="error-panel">
                <strong>错误：</strong>${error}
            </div>
        </c:if>
        
        <!-- 统计信息 -->
        <div class="stats">
            <div class="stat-item">
                <div class="stat-number">${userCount}</div>
                <div class="stat-label">用户总数</div>
            </div>
            <div class="stat-item">
                <div class="stat-number" id="activeUsers">
                    <c:set var="activeCount" value="0"/>
                    <c:forEach var="user" items="${users}">
                        <c:if test="${user.status == 1}">
                            <c:set var="activeCount" value="${activeCount + 1}"/>
                        </c:if>
                    </c:forEach>
                    ${activeCount}
                </div>
                <div class="stat-label">活跃用户</div>
            </div>
            <div class="stat-item">
                <div class="stat-number" id="currentTime"></div>
                <div class="stat-label">当前时间</div>
            </div>
        </div>
        
        <!-- 用户列表 -->
        <div class="info-panel">
            <h3>用户列表</h3>
            <p>以下是从数据库查询到的用户信息，验证SSM框架各层配置是否正确：</p>
        </div>
        
        <c:choose>
            <c:when test="${not empty users}">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>手机号</th>
                            <th>创建时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach var="user" items="${users}">
                            <tr>
                                <td>${user.id}</td>
                                <td><strong>${user.username}</strong></td>
                                <td>${user.email}</td>
                                <td>${user.phone}</td>
                                <td>
                                    <fmt:formatDate value="${user.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                </td>
                                <td>
                                    <c:choose>
                                        <c:when test="${user.status == 1}">
                                            <span class="status-active">正常</span>
                                        </c:when>
                                        <c:otherwise>
                                            <span class="status-inactive">禁用</span>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td>
                                    <button class="btn btn-info" onclick="viewUser(${user.id})">查看详情</button>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </c:when>
            <c:otherwise>
                <div class="no-data">
                    <p>暂无用户数据</p>
                    <p>请点击"初始化测试数据"按钮创建测试数据</p>
                </div>
            </c:otherwise>
        </c:choose>
        
        <!-- 测试结果显示 -->
        <div id="testResult" style="margin-top: 20px;"></div>
        
        <!-- 技术栈信息 -->
        <div class="info-panel">
            <h3>技术栈验证</h3>
            <p><strong>✅ Spring：</strong>依赖注入和AOP功能正常</p>
            <p><strong>✅ SpringMVC：</strong>控制器映射和视图解析正常</p>
            <p><strong>✅ MyBatis：</strong>数据库映射和SQL执行正常</p>
            <p><strong>✅ 数据库连接：</strong>HikariCP连接池工作正常</p>
            <p><strong>✅ 事务管理：</strong>声明式事务配置正常</p>
        </div>
    </div>
    
    <script>
        // 更新当前时间
        function updateTime() {
            const now = new Date();
            const timeStr = now.getHours().toString().padStart(2, '0') + ':' + 
                           now.getMinutes().toString().padStart(2, '0');
            document.getElementById('currentTime').textContent = timeStr;
        }
        
        // 刷新数据
        function refreshData() {
            window.location.reload();
        }
        
        // 初始化测试数据
        function initTestData() {
            $.ajax({
                url: '${pageContext.request.contextPath}/user/initData',
                type: 'POST',
                success: function(result) {
                    if (result.success) {
                        showMessage('success', result.message);
                        setTimeout(function() {
                            window.location.reload();
                        }, 1500);
                    } else {
                        showMessage('error', result.message);
                    }
                },
                error: function() {
                    showMessage('error', '请求失败，请检查网络连接');
                }
            });
        }
        
        // 获取统计信息
        function getStats() {
            $.ajax({
                url: '${pageContext.request.contextPath}/user/getStats',
                type: 'GET',
                success: function(result) {
                    if (result.success) {
                        showMessage('success', result.data);
                    } else {
                        showMessage('error', result.message);
                    }
                },
                error: function() {
                    showMessage('error', '获取统计信息失败');
                }
            });
        }
        
        // 查看用户详情
        function viewUser(userId) {
            $.ajax({
                url: '${pageContext.request.contextPath}/user/getUserById',
                type: 'GET',
                data: { id: userId },
                success: function(result) {
                    if (result.success) {
                        const user = result.data;
                        const userInfo = `
                            <h4>用户详细信息</h4>
                            <p><strong>ID:</strong> ${user.id}</p>
                            <p><strong>用户名:</strong> ${user.username}</p>
                            <p><strong>邮箱:</strong> ${user.email}</p>
                            <p><strong>手机号:</strong> ${user.phone}</p>
                            <p><strong>创建时间:</strong> <fmt:formatDate value="${user.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></p>
                            <p><strong>状态:</strong> ${user.status == 1 ? '正常' : '禁用'}</p>
                        `;
                        showMessage('info', userInfo);
                    } else {
                        showMessage('error', result.message);
                    }
                },
                error: function() {
                    showMessage('error', '获取用户信息失败');
                }
            });
        }
        
        // 显示消息
        function showMessage(type, message) {
            const resultDiv = document.getElementById('testResult');
            let className = 'info-panel';
            if (type === 'success') className = 'success-panel';
            if (type === 'error') className = 'error-panel';
            
            resultDiv.innerHTML = `<div class="${className}">${message}</div>`;
            
            // 3秒后自动隐藏
            setTimeout(function() {
                resultDiv.innerHTML = '';
            }, 3000);
        }
        
        // 页面加载完成后执行
        $(document).ready(function() {
            updateTime();
            setInterval(updateTime, 60000); // 每分钟更新一次时间
        });
    </script>
</body>
</html>